<template>
  <div class="active">
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <h2>供应商价格评审</h2>
      <el-button type="primary" @click="getInfo(true)">刷新</el-button>
    </div>
    <div class="table" ref="tablediv">
      <el-table
        :data="table"
        stripe
        style="width: 100%"
        border
        :span-method="objectSpanMethod"
      >
        <!-- 使用 v-for 循环生成表格列 -->

        <el-table-column prop="key" label="序号" width="80" align="center">
        </el-table-column>

        <el-table-column
          prop="applyTime"
          label="报名时间"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplierCode"
          label="供应商编码"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column prop="name" label="报名供应商" align="center">
          <template #default="scope">
            <span class="ellipsis">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="报价" align="center">
          <template #default="scope">
            <div class="price-cell">
              <span>￥</span>
              <el-input-number
                @blur="editPrice(scope.row, scope.row.price)"
                v-model="scope.row.price"
                placeholder="输入价格"
                :step="2"
                style="width: 100%"
                :controls="false"
              ></el-input-number>
              <span>元</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="操作" width="100" align="center">
          <template #default="scope">
            <span class="link" @click="ClickRow(scope.row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="endbutton">
      <el-button type="primary" @click="nextStep">下一步</el-button>
    </div>

    <div class="hidden-area" :style="{ left: HiddenArea ? '0' : '-32%' }">
      <div
        v-if="!HiddenArea && info.id"
        class="open"
        @click="HiddenArea = true"
      >
        <img src="@/assets/right.png" alt="" class="icoButtom" />
      </div>
      <div v-else class="hidden-div">
        <div class="hidden-info">
          <div v-if="info.id" class="custom-scrollbar">
            <div class="info-logo">
              <img src="@/assets/2de0a0aed8c056d27f6076574092ce6.png" alt="" />
            </div>
            <biddingInfo
              :id="info.id"
              :judgeid="info.judgeid"
              :back="false"
              :pattern="pattern"
            />
          </div>
        </div>
        <div @click="HiddenArea = false" class="close">
          <img src="@/assets/left.png" alt="" class="icoButtom" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { judgeProjectInfo } from "@/api/project.js";
import {
  getDictList,
  getDict,
  nowTime,
  getdict,
  SearchDicte,
} from "@/utils/common.js";
import { ElMessage } from "element-plus";

import {
  vieAuditexecTask,
  applySupplierInfoByProjectId,
  vieAuditupdateApplySupplier,
  updateApplySupplier,
} from "@/api/examine.js";
import biddingInfo from "./biddingInfo.vue";

const HiddenArea = ref(false);
const info = ref({});

const route = useRoute();
const router = useRouter();
const tablediv = ref({});
const id = computed(() => route.query.id);

const emit = defineEmits(["next-step"]);
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  pattern: {
    type: String,
    required: true,
  },
});
const dialogVisible = ref(false);
const selectedFormula = ref(1);
// 定义表格列配置
const taskNode = ref("");
const getInfo = (boolean) => {
  if (boolean) {
    window.location.replace("");
  }
  applySupplierInfoByProjectId({ id: id.value }).then((res) => {
    if (res.code == "200") {
      table.value = [];
      let key = 0;
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].status == "apply_supplier_pass") {
          key++;
          table.value[i] = {
            key: key,
            ...res.data[i],
            price: res.data[i].price,
          };
        }
      }
    }
  });
};
const ClickRow = (item) => {
  HiddenArea.value = false;
  setTimeout(() => {
    info.value = { id: id.value, judgeid: item.id };
    HiddenArea.value = true;
  }, 0); // 延迟1000毫秒（即1秒）
};
const nextStep = async () => {
  if (props.type == "vieTaskPrice") {
    const params = { projectId: id.value };
    vieAuditexecTask(params).then((res) => {
      if (res.code) {
        window.location.replace("");
      }
    });
  } else {
    window.location.replace("");
    // emit("next-step", 'vieTaskEnd');
  }
};
interface Supplier {
  id: number;
  supplierCode: string;
  name: string;
  evaluationPoint: string;
  score: number;
}
interface SpanMethodProps {
  row: Supplier;
  column: TableColumnCtx<Supplier>;
  rowIndex: number;
  columnIndex: number;
}
const rowspan = ref(3);
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  const key = column.property;

  if (key === "formula") {
    if (rowIndex % rowspan.value === 0) {
      return {
        rowspan: rowspan.value,
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }

  return { rowspan: 1, colspan: 1 };
};
const editPrice = (row) => {
  if (Number(row.pric) <= 0) {
    ElMessage({
      message: "价格不能低于0！",
      type: "error",
    });
    row.price = 0;
  }
  vieAuditupdateApplySupplier(row).then((res) => {
    if (res.code == "200") {
      // window.location.replace("");
    }
  });
};
// 定义表格数据
const table = ref([]);
onMounted(() => {
  getInfo();
});
</script>

<style scoped lang="scss">
@use "./judge";
</style>
<style scoped>
.price-cell {
  display: flex;
  align-items: center;
}

.price-cell span {
  margin: 0 5px;
}
:deep(.table) {
  display: flex;
}
</style>
